{extend name="../../../view/public/base" /}
{block name="css"}
<style>
    .layui-table-cell{
        height:80px;
        line-height: 80px;
    }
</style>

{/block}
{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <blockquote class="layui-elem-quote layui-text" style="border-left: 5px solid #01AAED;">
                    1、自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。<br>
                    2、一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替。
                </blockquote>
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <!--用户应用id-->
                    <input type="hidden" name="member_miniapp_id" class="layui-input" value="{$member_miniapp_id}"
                           lay-verify='required'>
                    <!--上级菜单id-->
                    <!--状态:1=上架,0=下架-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">上级菜单</label>
                            <div class="layui-input-block" id="parent_id">
                                <select name="parent_id" lay-verify="required" lay-filter="parent_id">
                                    <option value="0" selected>顶级菜单</option>
                                    {foreach $parents as $vo}
                                    <option value="{$vo.id}">{$vo.name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单动作</label>
                            <div class="layui-input-block" id="types">
                                <select name="types" lay-verify="required" lay-filter="types">
                                    <option value="view" selected>打开网页</option>
                                    <option value="miniprogram">打开小程序</option>
                                    <option value="click">触发关键词</option>
                                    <option value="scancode_push">扫码</option>
                                    <option value="scancode_waitmsg">扫码(等待信息)</option>
                                    <option value="location_select">发送位置</option>
                                    <option value="pic_sysphoto">系统拍照发图</option>
                                    <option value="pic_photo_or_album">拍照或者相册发图</option>
                                    <option value="pic_weixin">微信相册发图</option>
                                    <option value="media_id">回复素材</option>
                                    <option value="view_limited">跳转图文</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--菜单名称-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入菜单名称" class="layui-input" value=""
                                   lay-verify='required'>
                        </div>
                    </div>
                    <!--链接地址-->
                    <div class="layui-form-item" id="url" style="display: block">
                        <div class="">
                            <label class="layui-form-label">链接地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="url" placeholder="请输入链接地址" class="layui-input" value="">
                            </div>
                            <div class="layui-form-mid layui-word-aux">示例:http://www.buwangkeji.com/</div>
                        </div>
                    </div>
                    <!--小程序链接-->
                    <div class="layui-form-item" id="pagepath" style="display: none">
                        <label class="layui-form-label">小程序页面</label>
                        <div class="layui-input-inline">
                            <input type="text" name="pagepath" placeholder="请输入小程序页面" class="layui-input" value="">
                        </div>
                        <div class="layui-form-mid layui-word-aux">示例:pages/index/index</div>
                    </div>
                    <div class="layui-form-item" id="appid" style="display: none">
                        <label class="layui-form-label">小程序ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="appid" placeholder="请输入小程序ID" class="layui-input" value="">
                        </div>
                    </div>
                    <!--触发关键字KEY-->
                    <div class="layui-form-item" id="key" style="display: none">
                        <div class="layui-inline">
                            <label class="layui-form-label">匹配规则</label>
                            <div class="layui-input-block">
                                <select name="key">
                                    <option value="" selected>请选择</option>
                                    {foreach $keys as $key=>$vo }
                                    <option value="{$vo.keys}">{$vo.keys}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--media_id-->
                    <div class="layui-form-item" id="media_id" style="display: none">
                        <label class="layui-form-label">素材ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="media_id" placeholder="请输入素材ID" class="layui-input" value="">
                        </div>
                        <div class="layui-input-inline">
                            <span><a class="layui-btn layui-btn-normal" id="media"><i class="fa fa-list"></i> 选择素材</a></span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var form, upload, tableSelect;

    layui.use(['form', 'upload', 'tableSelect'], function () {
        form = layui.form;
        tableSelect = layui.tableSelect;
        var elemName = "media";
        var productList = $("#" + elemName);
        if (productList) {
            tableSelect.render({
                elem: "#" + elemName,
                checkedKey: 'id',
                searchType: 'more',
                searchList: [
                    {searchKey: 'product_name', searchPlaceholder: '请输入商品名'},
                ],
                table: {
                    url: '/manage/member.official/materialList?miniapp_id={$member_miniapp_id}',
                    cols: [[
                        {type: 'radio'},
                        {field: 'media_id', title: '素材ID', width: 80, align: "center"},
                        {field: 'thumb_url', width: 162, search: false, title: '图片', imageHeight: 40, align: "center",templet: function (d) {
                                if(d.thumb_url != ''){
                                    return '<img style="max-width: 162px; max-height: 80px;" src="' + d.thumb_url + '" data-image="' + d.title + '">';
                                }else {
                                    return '';
                                }
                            }},
                        {field: 'title', title: '标题', align: "center"},
                    ]]
                },
                done: function (e, data) {
                    $.each(data.data, function (index, val) {
                        $("input[name='media_id']").val(val.media_id);
                    });

                    layer.msg("选择成功", {icon: 1, shade: [0.02, '#000'], scrollbar: false, time: 2000, shadeClose: true});
                }
            })
        };

        form.on('select(types)', function (data) {
            if (data.value === 'view') {
                $("#url").attr("style", "display: block");
                $("#pagepath").attr("style", "display: none");
                $("#media_id").attr("style", "display: none");
                $("#key").attr("style", "display: none");
            }
            if (data.value === 'miniprogram') {
                $("#url").attr("style", "display: block");
                $("#pagepath").attr("style", "display: block");
                $("#appid").attr("style", "display: block");
                $("#media_id").attr("style", "display: none");
                $("#key").attr("style", "display: none");
            }
            if (data.value === 'click') {
                $("#url").attr("style", "display: none");
                $("#pagepath").attr("style", "display: none");
                $("#appid").attr("style", "display: none");
                $("#media_id").attr("style", "display: none");
                $("#key").attr("style", "display: block");
            }
            var types = ["scancode_push", "scancode_waitmsg", "pic_sysphoto", "pic_photo_or_album", "pic_weixin", "location_select"];
            if (types.indexOf(data.value) >= 0) {
                $("#url").attr("style", "display: none");
                $("#pagepath").attr("style", "display: none");
                $("#appid").attr("style", "display: none");
                $("#media_id").attr("style", "display: none");
                $("#key").attr("style", "display: block");
            }
            var types = ["media_id", "view_limited"];
            if (types.indexOf(data.value) >= 0) {
                $("#url").attr("style", "display: none");
                $("#pagepath").attr("style", "display: none");
                $("#appid").attr("style", "display: none");
                $("#key").attr("style", "display: none");
                $("#media_id").attr("style", "display: block");
            }
        });

        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;
            if (data.types === 'media_id' || data.types === 'view_limited') {
                data.key = data.media_id;
                delete data.media_id;
            }

            //ajax调用后台接口
            bwajax.post("{:Url('add')}?miniapp_id={$member_miniapp_id}", data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                })

            return false;
        })
    });
</script>
{/block}